<template>
  <div @mousewheel="wheel">
    <!-- 头部信息 -->
    <market-header></market-header>

    <!-- 搜索框 -->
    <market-search ref="marketSearch"></market-search>

    <!-- 轮播图区域 -->
    <market-slide-show></market-slide-show>

    <!-- 侧边栏 -->
    <market-aside ref="marketAside"
                  @wheel="wheel"></market-aside>

    <!-- 底部 -->
    <Market-footer></Market-footer>
  </div>
</template>

<script>
import MarketHeader from "@/components/common/MarketHeader"
import MarketSlideShow from "@/components/common/MarketSlideShow"
import MarketAside from "@/components/common/MarketAside"
import MarketRecommend from "@/components/common/MarketRecommend"
import MarketFooter from "@/components/common/MarketFooter"
import MarketSearch from "@/components/common/MarketSearch"
export default {
  components: {
    MarketHeader,
    MarketSlideShow,
    MarketAside,
    MarketRecommend,
    MarketFooter,
    MarketSearch
  },
  data () {
    return {
      loadList: {
        dom: '', // DOM解析耗时
        res: '', // 资源加载耗时
        fpt: '', // 首次渲染时间/白屏时间
        tti: '', // 首次可交互时间
        time: '', // 时间
      }
    }
  },
  mounted () {
    window.onload = this.load()
  },
  methods: {
    load () {
      let p = performance.timing;
      this.loadList.dom = (p.domInteractive - p.domLoading) / 1000 // DOM解析耗时
      this.loadList.res = (p.loadEventStart - p.domContentLoadedEventEnd) / 1000 // 资源加载耗时
      this.loadList.fpt = (p.responseEnd - p.navigationStart) / 1000 // 首次渲染时间/白屏时间
      this.loadList.tti = (p.domInteractive - p.navigationStart) / 1000 // 首次可交互时间
      this.loadList.time = Date.now() // 获取时间
    },
    wheel () {
      // 固定搜索框
      if (document.documentElement.scrollTop >= 400) {
        this.$refs.marketSearch.$el.children[0].classList.add("isFixed");
      } else {
        this.$refs.marketSearch.$el.children[0].classList.remove("isFixed");
      }
      // 固定侧边导航栏
      if (document.documentElement.scrollTop >= 500) {
        this.$refs.marketAside.$el.children[1].classList.add("isFixed");
      } else {
        this.$refs.marketAside.$el.children[1].classList.remove("isFixed");
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
}
.main {
  width: 1100px;
  height: 400px;
  margin: 0 auto;
  position: relative;
}
</style>